import React from "react";
import {Redirect} from "react-router-dom";
import Logo from "../../component/logo/logo";
import {WingBlank, WhiteSpace, List, InputItem, Button, Radio} from "antd-mobile";
import {connect} from "react-redux";
import {register} from "../../redux/user.reducer";
import CommonForm from "../../component/common-form/common-form";

@connect(
  status => status.user,
  {register}
)
@CommonForm
class Register extends React.Component {

  componentDidMount () {
    this.props.handleChange("role", "genius");
  }

  //注册
  handleRegister () {
    this.props.register(this.props.state);
  }

  render () {
    const RadioItem = Radio.RadioItem;
    return (
      <div className="register-wrap">
        {
          this.props.redirectTo ? <Redirect to={this.props.redirectTo}/> : null
        }
        <Logo/>
        <WingBlank>
          <List>
            <InputItem
              onChange={(v) => this.props.handleChange("username", v)}
            >用户名:</InputItem>
            <WhiteSpace/>
            <InputItem type="password"
                       onChange={(v) => this.props.handleChange("pwd", v)}
            >密码:</InputItem>
            <WhiteSpace/>
            <InputItem type="password"
                       onChange={(v) => this.props.handleChange("repeat_pwd", v)}
            >确认密码:</InputItem>
            <WhiteSpace/>
            <RadioItem name="role" checked={this.props.state.role === "genius"}
                       onChange={() => this.props.handleChange("role", "genius")}
            >牛人</RadioItem>
            <RadioItem name="role" checked={this.props.state.role === "boss"}
                       onChange={() => this.props.handleChange("role", "boss")}
            >BOSS</RadioItem>
          </List>
          <WhiteSpace/>
          <WhiteSpace/>
          <Button type="primary" onClick={() => this.handleRegister()}>注册</Button>
        </WingBlank>
      </div>
    );
  }
}


export default Register;
